<template>
	<view class="container">
		<view class="header">
			<view class="title">收货地址管理</view>
			<view class="add-btn" @click="addAddress">
				<text class="iconfont icon-plus"></text>
				<text>添加新地址</text>
			</view>
		</view>
		
		<view v-if="loading" class="loading">
			<text>加载中...</text>
		</view>
		
		<view v-else-if="addressList.length === 0" class="empty">
			<text>您还没有添加任何收货地址</text>
		</view>
		
		<view v-else class="address-list">
			<view 
				v-for="item in addressList" 
				:key="item.id" 
				class="address-item"
				:class="{ 'is-default': item.isDefault }"
			>
				<view class="address-content">
					<view class="receiver-info">
						<text class="receiver-name">{{ item.receiverName }}</text>
						<text class="receiver-phone">{{ item.receiverPhone }}</text>
					</view>
					<view class="address-detail">{{ item.detailedAddress }}</view>
					<view class="address-tag" v-if="item.isDefault">
						<text>默认地址</text>
					</view>
				</view>
				<view class="address-actions">
					<view class="action-btn" @click="setDefaultAddress(item.id)" v-if="!item.isDefault">
						<text class="iconfont icon-location"></text>
						<text>设为默认</text>
					</view>
					<view class="action-btn" @click="editAddress(item)">
						<text class="iconfont icon-edit"></text>
						<text>编辑</text>
					</view>
					<view class="action-btn delete" @click="deleteAddress(item.id)">
						<text class="iconfont icon-delete"></text>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '@/utils/request';

export default {
	data() {
		return {
			addressList: [],
			loading: false,
			userId: null
		};
	},
	onLoad() {
		this.checkLoginStatus();
	},
	onShow() {
		this.getAddressList();
	},
	methods: {
		// 检查登录状态
		checkLoginStatus() {
			const userStr = uni.getStorageSync('user');
			if (userStr) {
				try {
					const userInfo = JSON.parse(userStr);
					if (userInfo && userInfo.id) {
						this.userId = userInfo.id;
						return true;
					}
				} catch (error) {
					console.error('解析用户信息失败', error);
				}
			}
			
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}, 1500);
			
			return false;
		},
		
		// 获取地址列表
		async getAddressList() {
			if (!this.checkLoginStatus()) return;
			
			this.loading = true;
			try {
				// 打印当前token
				console.log('当前token:', uni.getStorageSync('token'));
				
				// 调整请求参数传递方式
				const response = await http.get(`/address/list?userId=${this.userId}`);
				
				if (response.code === 200) {
					this.addressList = response.data;
				} else {
					uni.showToast({
						title: response.message || '获取地址列表失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取地址列表失败:', error);
				uni.showToast({
					title: '获取地址列表失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 添加新地址
		addAddress() {
			if (!this.checkLoginStatus()) return;
			
			uni.navigateTo({
				url: '/pages/address/address-edit?type=add'
			});
		},
		
		// 编辑地址
		editAddress(address) {
			if (!this.checkLoginStatus()) return;
			
			uni.navigateTo({
				url: `/pages/address/address-edit?type=edit&id=${address.id}`
			});
		},
		
		// 删除地址
		deleteAddress(id) {
			if (!this.checkLoginStatus()) return;
			
			uni.showModal({
				title: '提示',
				content: '确定要删除这个地址吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const response = await http.delete(`/address/delete/${id}`);
							
							if (response.code === 200) {
								uni.showToast({
									title: '删除地址成功',
									icon: 'success'
								});
								this.getAddressList();
							} else {
								uni.showToast({
									title: response.message || '删除地址失败',
									icon: 'none'
								});
							}
						} catch (error) {
							console.error('删除地址失败:', error);
							uni.showToast({
								title: '删除地址失败',
								icon: 'none'
							});
						}
					}
				}
			});
		},
		
		// 设置为默认地址
		async setDefaultAddress(id) {
			if (!this.checkLoginStatus()) return;
			
			try {
				const response = await http.put(`/address/set-default?id=${id}&userId=${this.userId}`);
				
				if (response.code === 200) {
					uni.showToast({
						title: '设置默认地址成功',
						icon: 'success'
					});
					this.getAddressList();
				} else {
					uni.showToast({
						title: response.message || '设置默认地址失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('设置默认地址失败:', error);
				uni.showToast({
					title: '设置默认地址失败',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 30rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
}

.add-btn {
	display: flex;
	align-items: center;
	background-color: #409EFF;
	color: #fff;
	padding: 15rpx 30rpx;
	border-radius: 30rpx;
	font-size: 28rpx;
}

.add-btn .iconfont {
	margin-right: 10rpx;
	font-size: 32rpx;
}

.loading, .empty {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
	color: #999;
	font-size: 30rpx;
}

.address-list {
	margin-top: 20rpx;
}

.address-item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.address-item.is-default {
	border-left: 8rpx solid #67C23A;
}

.receiver-info {
	display: flex;
	margin-bottom: 15rpx;
}

.receiver-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-right: 20rpx;
}

.receiver-phone {
	font-size: 28rpx;
	color: #666;
}

.address-detail {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
	line-height: 1.4;
}

.address-tag {
	display: inline-block;
	background-color: #67C23A;
	color: #fff;
	font-size: 22rpx;
	padding: 6rpx 20rpx;
	border-radius: 20rpx;
}

.address-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #eee;
}

.action-btn {
	display: flex;
	align-items: center;
	padding: 10rpx 20rpx;
	margin-left: 30rpx;
	font-size: 24rpx;
	color: #666;
}

.action-btn .iconfont {
	margin-right: 6rpx;
	font-size: 28rpx;
}

.action-btn.delete {
	color: #F56C6C;
}
</style> 